<template>
	<main-container>
		<!-- 工具栏 -->
		<div class="hx-table-toolbar">
			<div>
				<el-button type="primary" v-auth="'mall:goodscategory:add'" @click="add"> <el-icon> <ele-Plus /></el-icon>新增
				</el-button>
				<el-button @click="onExpand"><el-icon> <ele-Sort /></el-icon>展开/折叠</el-button>
			</div>
			<right-toolbar :searchBtn="false" :refreshBtn="true" @search="showSearch = !showSearch"
				@refresh="initPage"></right-toolbar>
		</div>
		<Form ref="formRef" @initPage="initPage"></Form>
		<!-- 列表 -->
		<el-table v-if="refreshTable" v-loading="loading" :data="tableData" row-key="id" style="width: 100%"
			:default-expand-all="isDefaultExpand" border>
			<el-table-column prop="name" label="类目名称" width="200" />
			<el-table-column prop="description" label="类目描述" />
			<el-table-column prop="categoryPic" label="类目图片">
				<template #default="scope">
					<el-image style="width: 50px; height: 50px" v-if="scope.row.categoryPic" :src="scope.row.categoryPic"
						:preview-src-list="[scope.row.categoryPic]" fit="cover" :preview-teleported="true"></el-image>
				</template>
			</el-table-column>

			<el-table-column prop="status" label="状态">
				<template #default="scope">
					<el-tag v-if="scope.row.status == '0'" type="danger">禁用</el-tag>
					<el-tag v-if="scope.row.status == '1'" type="success">启用</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="sort" label="排序" align="center" />
			<el-table-column prop="createTime" label="创建时间" />
			<el-table-column label="操作" align="center" width="200">
				<template #default="scope">
					<el-button link type="primary" v-auth="'mall:goodscategory:edit'" @click="edit(scope.row)"> <el-icon>
							<ele-Edit /></el-icon> 修改 </el-button>
					<el-button link type="danger" v-auth="'mall:goodscategory:del'" @click="del(scope.row.id)"> <el-icon>
							<ele-Delete /></el-icon> 删除 </el-button>
				</template>
			</el-table-column>
		</el-table>
	</main-container>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent, ref, reactive, toRefs, nextTick } from 'vue';
import { getPage, delObj } from '/@/api/mall/goodscategory';
import { ElMessageBox, ElMessage } from 'element-plus';
export default defineComponent({
	components: { Form: defineAsyncComponent(() => import('./form.vue')), },
	setup() {
		const data = reactive({
			tableData: [],
			queryParams: {}
		});
		const showSearch = ref(true);
		const refreshTable = ref(true);
		const isDefaultExpand = ref(false);
		const loading = ref(false);
		const formRef = ref();


		const initPage = async () => {
			loading.value = true;
			await getPage({})
				.then((response: any) => {
					data.tableData = response.data.data;
					loading.value = false;
				})
				.catch(() => {
					loading.value = false;
				});
		};
		/**
		 * 新增按钮
		 */
		const add = () => {
			formRef.value.initForm();
		};
		/**
		 * 修改按钮
		 */
		const edit = (row: any) => {
			formRef.value.initForm(row);
		};
		/**
		 * 删除按钮
		 */
		const del = (id: string) => {
			ElMessageBox.confirm('此操作将删除该类目，是否继续?', '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				delObj(id)
					.then((response: any) => {
						ElMessage.success('删除成功');
						initPage();
					})
					.catch(() => { });
			});
		};
		/**
		 * 展开/折叠菜单
		 */
		const onExpand = () => {
			isDefaultExpand.value = !isDefaultExpand.value;
			refreshTable.value = false;
			nextTick(() => {
				refreshTable.value = true;
			});
		};
		initPage();
		return {
			showSearch,
			refreshTable,
			isDefaultExpand,
			loading,
			formRef,
			add,
			edit,
			del,
			onExpand,
			initPage,
			...toRefs(data)
		};
	},
});
</script>
